<template>
  <div ref="total" style="width: 105%; height:calc(100vh - 400px)"></div>
</template>

<script>
import * as echarts from "echarts/core";
import {
  TitleComponent,
  GridComponent,
  DataZoomComponent,
} from "echarts/components";
import { BarChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
import {getFoldLine} from '@/apis/purchase/healthAnalysis.js'

echarts.use([
  TitleComponent,
  GridComponent,
  DataZoomComponent,
  BarChart,
  CanvasRenderer,
]);
export default {
  mounted() {
    this.drawtotal();
  },
  methods: {
    async drawtotal() {
      var chartDom = this.$refs.total;
      var myChart = echarts.init(chartDom);
      var option;
      await getFoldLine()
        .then((res) => {
          // prettier-ignore
          // let dataAxis = res.data.day
          // prettier-ignore
          // let data = res.data.value
          let yMax = 500;
          var dataAxis = res.data.day;
          var data = res.data.value;
          let dataShadow = [];
          for (let i = 0; i < data.length; i++) {
            dataShadow.push(yMax);
          }
          option = {
            title: {
              text: "常见疾病发病情况（ 数据样本总量：2000头奶牛）",
              // top:20,
              // left:"35%"
            },
            xAxis: {
              data: dataAxis,
              axisLabel: {
                inside: true,
                color: "#fff",
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              z: 10,
            },
            yAxis: {
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                color: "#999",
              },
            },
            dataZoom: [
              {
                type: "inside",
              },
            ],
            series: [
              {
                type: "bar",
                showBackground: true,
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "#83bff6" },
                    { offset: 0.5, color: "#188df0" },
                    { offset: 1, color: "#188df0" },
                  ]),
                },

                label: {
                  show: true, // 开启显示
                  position: 'top', // 在上方显示
                  distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效
                  verticalAlign: 'middle',
                  textStyle: {
                    color: '#424656', // 顶部数据的颜色
                    fontSize: 12     // 顶部数据的字体大小
                  },
                  // formatter: function (params) {
                  //   // dataIndex是当前柱状图的索引
                  //   let num = yData[params.dataIndex] / 160;
                  //   num = Math.round(num * 100) / 100; // 保留两位小数,不四舍五入
                  //   return (
                  //     yData[params.dataIndex] + '人' + '(' + num + '%' + ')' // 此处return的字符串可根据自身项目需求自定义
                  //   );
                  // },
                },
                emphasis: {
                  itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      { offset: 0, color: "#2378f7" },
                      { offset: 0.7, color: "#2378f7" },
                      { offset: 1, color: "#83bff6" },
                    ]),
                  },
                },
                data: data,
              },
            ],
          };
          // Enable data zoom when user click bar.
          const zoomSize = 6;
          myChart.on("click", function (params) {
            myChart.dispatchAction({
              type: "dataZoom",
              startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
              endValue:
                dataAxis[
                Math.min(params.dataIndex + zoomSize / 2, data.length - 1)
                ],
            });
          });

          myChart.setOption(option);
        })
        .catch(() => { });

    },
  },
};
</script>

<style></style>